<template>
  <div class="page-container">
    <el-container>
      <el-main class="main-content">
        <el-carousel height="420px" interval="4000" arrow="always" class="rounded-carousel">
          <el-carousel-item>
            <img src="/images/swiper1.png" alt="轮播图1">
          </el-carousel-item>
          <el-carousel-item>
            <img src="/images/swiper2.png" alt="轮播图2">
          </el-carousel-item>
          <el-carousel-item>
            <img src="/images/swiper3.png" alt="轮播图3">
          </el-carousel-item>
        </el-carousel>
        <el-row :gutter="20" class="card-row">
          <el-col :span="12">
            <el-card class="card-style rounded-card">
              <div class="card-header bidding-notice-header" @click="goToAnnouncements('biddingNotices')">
                <h2>招标预告</h2>
                <el-button type="text">更多<img src="/public/images/pic2.png" alt="pic2" class="pic2"></el-button>
              </div>
              <el-skeleton :rows="4" animated :loading="!biddingNotices.length">
                <ul class="full-width-list">
                  <li v-for="notice in biddingNotices" :key="notice.id" class="list-item">
                    <img src="/public/images/pic3.png" alt="招标预告图标" class="card-icon">
                    <div>
                      <p>{{ notice.title }}</p>
                    </div>
                    <div>
                      <span>{{ notice.date }}</span>
                    </div>
                  </li>
                </ul>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card-style rounded-card">
              <div class="card-header bidding-announcement-header" @click="goToAnnouncements('biddingAnnouncements')">
                <h2>招标公告</h2>
                <el-button type="text">更多 <img src="/public/images/pic2.png" alt="pic2" class="pic2"></el-button>
              </div>
              <el-skeleton :rows="4" animated :loading="!biddingAnnouncements.length">
                <ul class="full-width-list">
                  <li v-for="announcement in biddingAnnouncements" :key="announcement.id" class="list-item">
                    <img src="/public/images/pic3.png" alt="招标预告图标" class="card-icon">
                    <div>
                      <p>{{ announcement.title }}</p>
                    </div>
                    <div>
                      <span>{{ announcement.date }}</span>
                    </div>
                  </li>
                </ul>
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="card-row">
          <el-col :span="12">
            <el-card class="card-style rounded-card">
              <div class="card-header winning-announcement-header" @click="goToAnnouncements('winningAnnouncements')">
                <h2>中标公告</h2>
                <el-button type="text">更多<img src="/public/images/pic2.png" alt="pic2" class="pic2"></el-button>
              </div>
              <el-skeleton :rows="4" animated :loading="!winningAnnouncements.length">
                <ul class="full-width-list">
                  <li v-for="announcement in winningAnnouncements" :key="announcement.id" class="list-item">
                    <img src="/public/images/pic3.png" alt="招标预告图标" class="card-icon">
                    <div>
                      <p>{{ announcement.title }}</p>
                    </div>
                    <div>
                      <span>{{ announcement.date }}</span>
                    </div>
                  </li>
                </ul>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card-style rounded-card">
              <div class="card-header procurement-header" @click="goToAnnouncements('procurementList')">
                <h2>企业采购</h2>
                <el-button type="text">更多<img src="/public/images/pic2.png" alt="pic2" class="pic2"></el-button>
              </div>
              <el-skeleton :rows="4" animated :loading="!procurementList.length">
                <ul class="full-width-list">
                  <li v-for="procurement in procurementList" :key="procurement.id" class="list-item">
                    <img src="/public/images/pic3.png" alt="招标预告图标" class="card-icon">
                    <div>
                      <p>{{ procurement.title }}</p>
                    </div>
                    <div>
                      <span>{{ procurement.date }}</span>
                    </div>
                  </li>
                </ul>
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
  ElContainer,
  ElMain,
  ElRow,
  ElCol,
  ElCard,
  ElSkeleton,
  ElButton,
  ElCarousel,
  ElCarouselItem
} from 'element-plus';
import { useRouter } from 'vue-router';

const biddingNotices = ref([]);
const biddingAnnouncements = ref([]);
const winningAnnouncements = ref([]);
const procurementList = ref([]);

const router = useRouter();

const generateRandomData = (count) => {
  const data = [];
  for (let i = 0; i < count; i++) {
    data.push({
      id: i + 1,
      title: `项目${i + 1} - 描述信息${i + 1}`,
      date: new Date().toLocaleDateString()
    });
  }
  return data;
};

const getData = async () => {
  biddingNotices.value = generateRandomData(5);
  biddingAnnouncements.value = generateRandomData(5);
  winningAnnouncements.value = generateRandomData(5);
  procurementList.value = generateRandomData(5);
};

const goToAnnouncements = (type) => {
  router.push(`/announcements?type=${type}`);
};

onMounted(() => {
  getData();
});
</script>

<style scoped>
.page-container {
  width: 1400px;
  margin: 0 auto;
}

.main-content {
  padding: 20px;
}

.card-row {
  margin-bottom: 20px;
}

.card-style {
  height: 400px;
  overflow-y: auto;
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.rounded-carousel {
  border-radius: 10px; /* 添加圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.rounded-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-size: 100% auto;
  background-position: center;
  color: white;
  padding: 10px;
  font-size: 20px;
  border-top-left-radius: 10px; /* 添加圆角 */
  border-top-right-radius: 10px; /* 添加圆角 */
  cursor: pointer; /* 添加鼠标悬停效果 */
}

.bidding-notice-header,
.bidding-announcement-header,
.winning-announcement-header,
.procurement-header {
  background-image: url('/public/images/u12.png');
  background-repeat: no-repeat;
  background-size: 100% 70%;
}

.full-width-list {
  width: 100%;
  padding: 0;
  margin: 0; /* 移除 margin */
}

ul {
  list-style: none;
}
li {
  display: flex;
  align-items: center;
  padding: 9px;
  border-bottom: 1px solid #eee;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.list-item div {
  display: flex;
  flex-direction: column;
}

.list-item p {
  margin: 0 0 5px 0;
  font-weight: 500;
}

.list-item span {
  color: #999;
}

.more-pic {
  width: 16px;
  height: 16px;
  margin-left: 5px;
}
@media (max-width: 1400px) {
  .page-container {
    width: 100%;
    padding: 0 20px; /* 添加左右内边距，保持内容不紧贴屏幕边缘 */
  }
  }
</style>